<template>
	<!-- 中部 -->
	<div class="Mid">
		<ul class="play">
			<li v-for="item in list" :key="item.id">
				<router-link to="/">
					<img :src="item.imgURl" />
					<p>{{item.txt}}</p>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'Mid',
		data(){
			return{
				list:[
					{id:1,imgURl:'img-mid/02%20(5).png',txt:'周边游'},
					{id:1,imgURl:'img-mid/02%20(1).png',txt:'国内游'},
					{id:1,imgURl:'img-mid/02%20(2).png',txt:'出境游'},
					{id:1,imgURl:'img-mid/02%20(3).png',txt:'自由游'},
					{id:1,imgURl:'img-mid/02%20(4).png',txt:'酒店民宿'}
				]
			}
		}
	}
</script>

<style scoped>
	.Mid{
		width: 100%;
		height: 2.5rem;
		overflow: hidden;
		margin-top: 0.2rem;
	}
	.play{
		width: 100%;
		height: 5rem;
	}
	.play li{
		width: 20%;
		float: left;
		text-align: center;
	}
	.play img{
		width: 80%;
	}
	.play p{
		color: #000000;
		padding-top: 0.15rem;
		padding-bottom: 0.5rem;
	}
	a{
		text-decoration: none;
	}
</style>
